<template>
	<view class="content">
		<view class="header">
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="true">
					<swiper-item v-for="(imgList,index) in imageList" :key="index">
						<view class="swiper-item uni-bg-red" v-for="(sub,index1) in imgList.subtag" :key="index1">
							<image :src="sub.classifiedImageUrl" :alt="sub.title" style="width: 30px; height: 30px;" />
							<br />
							<span>
								{{sub.classifiedTitle}}
							</span>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="activity">
				<view class="seckill"></view>
				<view style="float: left;margin-top: 70px;margin-left: -65px;color: white;font-weight: bold;">限时低价
				</view>
				<view class="">
					<input type="text" value="去抢购" disabled="true" style="
					 width: 65px;height: 20px;border-radius: 15px;text-align: left;
					 float: left;margin-top: 100px;margin-left: -65px;
					 background-color: white;color: #ff5500;
					 background-image: url('https://img20.360buyimg.com/img/jfs/t1/238192/15/7188/265/65783069F1178bf7d/b15fdc2244088b71.png');
					 background-repeat: no-repeat;font-size: 16px;
					 background-position: 50px 7px;" />
					<view class="index_skil">
						<swiper style="width: 100%;height: 123px;" circular>
							<swiper-item>
								<view style="float: left;">
									<image src="../../static/c1.jpg" style="width: 60px;
										height: 60px;margin-top: 20px;" mode=""></image><br />
									<span
										style="color: #ff5500;margin-left: 12px;font-size: 14px;letter-spacing: 0px;">￥769</span>
								</view>
								<view style="float: left;">
									<image src="../../static/c2.jpg" style="width: 60px;
										height: 60px;margin-top: 20px;margin-left: 5px;" mode=""></image><br />
									<span
										style="color: #ff5500;margin-left: 12px;font-size: 14px;letter-spacing: 0px;">￥769</span>
								</view>
								<view style="float: left;">
									<image src="../../static/c3.jpg" style="width: 60px;
										height: 60px;margin-top: 20px;margin-left: 5px;" mode=""></image><br />
									<span
										style="color: #ff5500;margin-left: 12px;font-size: 14px;letter-spacing: 0px;">￥769</span>
								</view>

								<view style="float: left;">
									<image src="../../static/c4.jpg" style="width: 60px;
										height: 60px;margin-top: 20px;margin-left: 5px;" mode=""></image><br />
									<span
										style="color: #ff5500;margin-left: 12px;font-size: 14px;letter-spacing: 0px;">￥769</span>
								</view>

							</swiper-item>
							<swiper-item>
								<view style="float: left;">
									<image src="../../static/c5.jpg" style="width: 60px;
										height: 60px;margin-top: 20px;" mode=""></image><br />
									<span
										style="color: #ff5500;margin-left: 12px;font-size: 14px;letter-spacing: 0px;">￥769</span>
								</view>
								<view style="float: left;">
									<image src="../../static/c6.jpg" style="width: 60px;
										height: 60px;margin-top: 20px;margin-left: 5px;" mode=""></image><br />
									<span
										style="color: #ff5500;margin-left: 12px;font-size: 14px;letter-spacing: 0px;">￥769</span>
								</view>
								<view style="float: left;">
									<image src="../../static/c7.jpg" style="width: 60px;
										height: 60px;margin-top: 20px;margin-left: 5px;" mode=""></image><br />
									<span
										style="color: #ff5500;margin-left: 12px;font-size: 14px;letter-spacing: 0px;">￥769</span>
								</view>
								<view style="float: left;">
									<image src="../../static/c8.jpg" style="width: 60px;
										height: 60px;margin-top: 20px;margin-left: 5px;" mode=""></image><br />
									<span
										style="color: #ff5500;margin-left: 12px;font-size: 14px;letter-spacing: 0px;">￥769</span>
								</view>

							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>

		<view class="list" v-for="(inde,index) in 20 " :key="index">
			<!-- 刷新页面后的顶部提示框 -->
			<!-- 当前弹出内容没有实际逻辑 ，可根据当前业务修改弹出提示 -->

			<!-- 页面分类标题 -->
			<!-- 基于 uni-list 的页面布局 -->
			<uni-list :class="{ 'uni-list--waterfall': options.waterfall }">
				<!-- 通过 uni-list--waterfall 类决定页面布局方向 -->
				<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
				<uni-list-item :border="!options.waterfall" class="uni-list-item--waterfall" title="自定义商品列表"
					v-for="item in data" :key="item.booksId" to="/pages/details/details">
					<!-- 通过header插槽定义列表左侧图片 -->
					<template v-slot:header>
						<view class="uni-thumb shop-picture" :class="{ 'shop-picture-column': options.waterfall }">
							<image :src="item.spu.spuImager" mode="aspectFill"></image>
						</view>
					</template>
					<template v-slot:body>
						<view class="shop">
							<view>
								<view class="uni-title">
									<text class="uni-ellipsis-2">{{ item.booksName }}</text>
								</view>
								<view>
									<!-- <text class="uni-tag hot-tag">{{ item.goods_tip }}</text> -->
									<text v-for="tag in item.tag" :key="tag" class="uni-tag">{{ tag }}</text>
								</view>
							</view>
							<view>
								<view class="shop-price">
									<text>¥</text>
									<text class="shop-price-text">{{ item.spu.spuBooksPrice }}</text>
									<text>.00</text>
								</view>
								<view class="uni-note">999+ 条评论 月销量 1000+ </view>
								<view class="uni-note ellipsis">
									<text class="uni-ellipsis-1"></text>
								</view>
							</view>
						</view>
					</template>


				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
	import {
		daohuang,
		jia
	} from '../appjs/indexJs/indexJs';
	export default {
		components: {},
		data() {
			return {
				imageList: [],
				data: [],
				options: {
					waterfall: true, // 布局方向切换
					status: 'loading', // 加载状态
				},
				tipShow: false // 是否显示顶部提示框
			};
		},
		onLoad() {
			this.jia();
			this.daohuang();
			setTimeout(function() {
				console.log('start pulldown');
			}, 1000);
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			onRefresh() {
				setTimeout(() => {
					console.log("刷新成功")

					this.$msg('刷新成功')
				}, 100)
			},
			jia() {
				let thae = this;
				jia().then(function(data) {
					thae.data = data.data.records;
				})
			},
			daohuang() {
				let thae = this;
				let subtaglist1 = [];
				let subtaglist2 = [];
				daohuang().then(function(data) {
					console.log("data输出", data.data.navigation)
					data.data.navigation.forEach((item, index) => {
						if (item.classifiedIndex <= 5) {
							console.log("1-5", item.classifiedIndex)
							console.log("1-5", item)
							subtaglist1.push(item);
						} else {
							console.log("5-10", item.classifiedIndex)
							subtaglist2.push(item);
						}
					})
					thae.imageList.push({
						"index": "1",
						"subtag": subtaglist1
					}, {
						"index": "2",
						"subtag": subtaglist2
					})
				})
			}
		},

	};
</script>

<style lang="scss">
	@import '../../common/uni-ui.scss';

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	.tips {
		color: #67c23a;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		background-color: #f0f9eb;
		height: 0;
		opacity: 0;
		transform: translateY(-100%);
		transition: all 0.3s;
	}

	.tips-ani {
		transform: translateY(0);
		height: 40px;
		opacity: 1;
	}

	.shop {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.shop-picture {
		width: 110px;
		height: 110px;
	}

	.shop-picture-column {
		width: 100%;
		height: 170px;
		margin-bottom: 10px;
	}

	.shop-price {
		margin-top: 5px;
		font-size: 12px;
		color: #ff5a5f;
	}

	.shop-price-text {
		font-size: 16px;
	}

	.hot-tag {
		background: #ff5a5f;
		border: none;
		color: #fff;
	}

	.button-box {
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		background: #007AFF;
		color: #fff;
	}

	.uni-link {
		flex-shrink: 0;
	}

	.ellipsis {
		display: flex;
		overflow: hidden;
	}

	.uni-ellipsis-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}


	// 默认加入 scoped ，所以外面加一层提升权重
	.list {

		.uni-list--waterfall {

			/* #ifndef H5 || APP-VUE */
			// 小程序 编译后会多一层标签，而其他平台没有，所以需要特殊处理一下
			/deep/ .uni-list {
				/* #endif */
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				padding: 5px;
				box-sizing: border-box;

				/* #ifdef H5 || APP-VUE */
				// h5 和 app-vue 使用深度选择器，因为默认使用了 scoped ，所以样式会无法穿透
				/deep/
				/* #endif */
				.uni-list-item--waterfall {
					width: 50%;
					box-sizing: border-box;

					.uni-list-item__container {
						padding: 5px;
						flex-direction: column;
					}
				}

				/* #ifndef H5 || APP-VUE */
			}

			/* #endif */
		}
	}

	.header {
		background-image: linear-gradient(to bottom, red, #fff);
		width: 100%;
		height: 100%;
	}

	.uni-margin-wrap {
		padding-top: 50px;
	}

	.activity {
		width: 90%;
		height: 130px;
		background-image: url("https://img11.360buyimg.com/img/jfs/t1/226923/11/7714/45152/65782c91F9d91466d/24928a901f4c3f58.png");
		background-size: 100% 100%;
		border-radius: 20px;
		margin-left: 20px;
		margin-top: 20px;
	}

	.seckill {
		background-image: url("https://img30.360buyimg.com/img/jfs/t1/227615/23/8080/1616/65782dd8F605d99af/0d97136b32d5ab1b.png");
		width: 4rem;
		height: 2rem;
		background-size: 100% 100%;
		float: left;
		margin-top: 30px;
		margin-left: 10px;
	}

	.swiper {
		height: 180rpx;
		width: 90%;
		border: 1px solid #f8f8f8;
		border-radius: 20px;
		margin-left: 20px;
		background-color: #fff;
	}

	.swiper-item {
		text-align: center;
		z-index: 9999;
		margin-left: 15px;
		margin-top: 10px;
		font-size: 13px;
		float: left;

	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.index_skil {
		width: 75%;
		height: 123px;
		border: 1px solid beige;
		border-radius: 15px;
		float: right;
		margin-right: 3px;
		margin-top: 2.5px;
		background-color: #fff;
		letter-spacing: 6px;
	}

	.goods {
		margin: 20px;
	}

	.price {
		display: flex;
	}

	.see {
		margin-left: 70px;
		background-color: #eae5e5;
		border-radius: 30px;
		width: 50px;
		text-align: center;
	}
</style>